// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  //是否执行抗锯齿。默认值为false
  antialias: true,
});

// 设置渲染器的尺寸，也就是生成canvas元素的宽高
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置canvas背景色(clearColor)和背景色透明度（clearAlpha）,透明度默认为1, 1-不透明
renderer.setClearColor("green");
// 添加canvas元素到body中
document.body.appendChild(renderer.domElement);

// 创建场景
const scene = new THREE.Scene();
// 创建透视照相机
// 1、fov(field of view 的缩写)，可选参数，默认值为 50，指垂直方向上的角度，注意该值是度数不是弧度
// 2、aspect，可选参数，默认值为 1，画布的宽高比(宽/高)
// 3、near，可选参数，默认值为 0.1，近平面，限制摄像机可绘制最近的距离，若小于该距离则不会绘制
// 4、far，可选参数，默认值为 2000，远平面，限制摄像机可绘制最远的距离，若超出该距离则不会绘制
const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.z = 5;

// resize 事件
window.addEventListener("resize", () => {
  let width = window.innerWidth;
  let height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;

  // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
  // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
  // 如果相机的一些属性发生了变化，就需要手动执行updateProjectionMatrix ()方法更新相机的投影矩阵
  camera.updateProjectionMatrix();
});

// 外部较大的正方体
// BoxGeometry用来创建长方体
const geometry2 = new THREE.BoxGeometry(3, 3, 3);

const material2 = new THREE.MeshBasicMaterial({
  color: "#dadada",
  wireframe: true,
  transparent: true,
});

const wireframeCube = new THREE.Mesh(geometry2, material2);
scene.add(wireframeCube);

// 里面小的立体方
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
  color: 0xff0051,
  flatShading: true,
  metalness: 0,
  roughness: 1,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);

// 点光源
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(25, 50, 25);
scene.add(pointLight);

function animate() {
  requestAnimationFrame(animate);
  // 大的立方体旋转角度大
  cube.rotation.x += 0.04;
  cube.rotation.y += 0.04;
  // 大的立方体旋转角度小
  wireframeCube.rotation.x -= 0.01;
  wireframeCube.rotation.y -= 0.01;
  renderer.render(scene, camera);
}

animate();
